
<template>
  <li key={{p.id}}>
                <label>
                    <input type="checkbox" tid="p.id"  :checked=p.done @change="check(p.id,p.done)" />
                    <span>{{p.title}}</span>
                </label>
                <button class="btn btn-danger" :style="{ display:  p.done ? 'inline-block' : 'none' }" @click="remove(p.id)">删除</button>
            </li>
</template>

<script>
export default {
  name: 'Item',
  props:['p','removeTodo','checkTodo'],
  methods:{
    check(id,done){
      // console.log(id,done)
      return this.checkTodo(id,done);
    },
    remove(id){
      return this.removeTodo(id);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>